import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { TreeNode } from '@iux/live';

@Component({
  selector: 'app-multiple-select',
  templateUrl: './multiple-select.component.html',
  styles: [
    `
      .ui-tree-select-container {
        width: 368px;
      }
      .selection span {
        padding-right: 8px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MultipleSelectComponent implements OnInit {
  treeData: TreeNode[];
  selection: TreeNode[];

  constructor() {}

  ngOnInit() {
    // 树
    this.treeData = [
      {
        label: 'Documents-disabled',
        disabled: true,
        children: [
          {
            label: 'ExpensesExpensesExpensesExpensesExpensesExpenses.doc',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Word',
        children: [
          {
            label: 'Expenses.doc',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Pictures',
        children: [
          {
            label: 'logo.png',
            isLeaf: true,
          },
          {
            label: 'banner.pnd',
            isLeaf: true,
          },
        ],
      },
    ];

    // 默认选中项，传入什么显示什么
    this.selection = [this.treeData[0], this.treeData[1]];
  }
  // 选中项变化回调
  selectionChange(event) {
    console.log('selection:', event);
  }
}
